<template>
<div class="goodsList">
    <div class="goodsList2">
        <div class="gl-item touch-hover" v-for="(item,index) in list" :key="index" >
          <div class="goDetail" @click="toGoodsDetail(item.id)">
        		<div class="gl-img"><img :src="item.thumbnail"></div>
        		<div class="gl-name">{{item.productname}}</div>
        		<div class="gl-price">￥{{item.price | priceFilter}}<mt-badge size="small" color="#FF9900" v-if="item.act_id">折扣</mt-badge></div>
          </div>
      		<div class="iconfont buy-cart">&#xe635;</div>
        </div>
    </div>
</div>
</template>
<script>
import { Header, Toast, MessageBox } from "mint-ui";
export default {
  props: {
    list: {
      type: [Object, Array],
      default: []
    }
  },
  filters: {
    priceFilter(value) {
      let realVal = Number(value).toFixed(2);
      return realVal;
    }
  },
  data() {
    return {
    
    }
  },
  mounted() {

  },
  methods: {
    toGoodsDetail(id) {
      
    },
    addCart(goodsId) {
    
    }
  },
}
</script>

<!--商品列表展示页面-->
<style lang="scss" scoped>
.goodsList2 {
  padding: 20px;
  background: #fff;
  img {
    width: 100%;
  }
  .gl-item {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    border-bottom: 1px solid #dedede;
    overflow: hidden;
  }
  .gl-item .gl-img {
    float: left;
    width: 160px;
    height: 160px;
    margin-right: 20px;
  }
  .gl-item .gl-name {
    float: left;
    height: 80px;
    min-width: 60%;
    line-height: 40px;
    color: #333333;
    font-size: 28px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }

  .gl-item .gl-viefor {
    float: right;
    width: 130px;
    height: 46px;
    line-height: 46px;
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
    background: #4b2;
    border-radius: 8px;
    text-align: center;
  }
  .gl-item .gl-price {
    float: left;
    max-width: 300px;
    margin-top: 40px;
    font-size: 32px;
    color: #4b2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .gl-item .gl-amount {
    float: right;
    width: 150px;
    height: 40px;
    margin-top: 45px;
    color: #666;
    font-size: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
  }
    .buy-cart {
    position: absolute;
    right: 20px;
    bottom: 24px;
    font-size: 36px;
    }
  .goDetail {
    width: 80%;
    height: 160px;
  }
}
</style>
